<template>
	<view>
		<cu-custom :isBack="true" bgColor="bg-blue">
			<block slot="content">成本信息</block>
			<template slot="backText">
				<text class="cuIcon-back" @tap="beforePage"></text>
			</template>
		</cu-custom>
		<view style="height: 138upx;" class="padding-tb-20 padding-lr-30">
			<view class="search-fixed bg-blue" :style="{marginTop: CustomBar + 'px'}">
				<!-- 时间选择器 -->
				<view class="flex align-center date-select u-font-weight6 bg-blue">
					<picker mode="date" :value="date" start="1970-01-01" @change="DateChange">
						<view class="picker">
							{{date}}
						</view>
					</picker>
					<text class="ph-sousuoshijian position-text text-blue"></text>
				</view>
			</view>
		</view>
		<!-- 主题内容 -->
		<view class="padding-t">
			<view class="">
				<view class="u-main">
					<view class="u-main-title u-font-weight7">
						班组成本对比
					</view>
					<view class="u-main-line"></view>
					<view class="u-main-info padding2030">
						<view class="column-echarts">
							<u-charts :legend="team.legend" :canvas-id="team.id" :chartType="team.chartType" :cWidth="team.radarWidth"
							 :cHeight="team.radarHeight" :opts="team.opts" :xAxis="team.xAxis" :ref="team.id" />
						</view>
					</view>
				</view>
				<view class="u-main">
					<view class="u-main-title u-font-weight7">
						各钢种成本变化趋势
					</view>
					<view class="u-main-line"></view>
					<view class="u-main-info padding2030">
						<view class="column-echarts">
							<u-charts :legend="group.legend" :canvas-id="group.id" :chartType="group.chartType" :cWidth="group.radarWidth"
							 :cHeight="group.radarHeight" :opts="group.opts" :xAxis="group.xAxis" :yAxis="group.yAxis" :ref="group.id" />
						</view>
					</view>
				</view>
				
				<view class="u-main">
					<view class="u-main-title u-font-weight7">
						各厚度成本变化趋势
					</view>
					<view class="u-main-line"></view>
					<view class="u-main-info padding2030">
						<view class="column-echarts">
							<u-charts :legend="thinkGroup.legend" :canvas-id="thinkGroup.id" :chartType="thinkGroup.chartType" :cWidth="thinkGroup.radarWidth"
							 :cHeight="thinkGroup.radarHeight" :opts="thinkGroup.opts" :xAxis="thinkGroup.xAxis" :yAxis="thinkGroup.yAxis" :ref="thinkGroup.id" />
						</view>
					</view>
				</view>
				
				<view class="u-main">
					<view class="u-main-title u-font-weight7">
						各宽度成本变化趋势
					</view>
					<view class="u-main-line"></view>
					<view class="u-main-info padding2030">
						<view class="column-echarts">
							<u-charts :legend="widthGroup.legend" :canvas-id="widthGroup.id" :chartType="widthGroup.chartType" :cWidth="widthGroup.radarWidth"
							 :cHeight="widthGroup.radarHeight" :opts="widthGroup.opts" :xAxis="widthGroup.xAxis" :yAxis="widthGroup.yAxis" :ref="widthGroup.id" />
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="cu-tabbar-height"></view>
	</view>
</template>

<script>
	import {
		post,
		getTime
	} from "@/lib/Util.js";
	import uCharts from '@/components/u-charts/component.vue';
	import {GET_COST_STATISTICS_INFO, GET_COST_CLASS_INFO} from '@/common/api/cost.js'
	export default {
		components: {
			uCharts
		},
		data() {
			return {
				date: '',
				team: {
					legend: {
						data: ['生产成本'],
						position: 'top',
						float: 'right',
						fontColor: 'rgba(0,0,0,0.60)'
					},
					radarWidth: uni.upx2px(690),
					radarHeight: uni.upx2px(420),
					chartType: "column",
					extraType: "",
					id: "chenbens",
					xAxis: {
						disabled: false,
						disableGrid: false,
					},
					yAxis: {

					},
					opts: {
						categories: ['甲', '乙', '丙', '丁'],
						series: [{
							name: '生产成本',
							data: [0, 0, 0, 0]
						}]
					}
				},
				group: {
					legend: {
						data: ['Q235B', 'Q345B'],
						position: 'top',
						float: 'right',
						fontColor: 'rgba(0,0,0,0.60)'
					},
					radarWidth: uni.upx2px(690),
					radarHeight: uni.upx2px(420),
					chartType: "line",
					extraType: "",
					id: "dungang",
					xAxis: {
						disabled: false,
						disableGrid: true,
						labelCount: 8,
					},
					yAxis: {
						disabled: true,
					},
					opts: {
						categories: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30],
						series: [{
							name: 'Q235B',
							data: [0, 0, 0, ]
						}]
					}
				},
				widthGroup: {
					legend: {
						data: [],
						position: 'top',
						float: 'right',
						fontColor: 'rgba(0,0,0,0.60)'
					},
					radarWidth: uni.upx2px(690),
					radarHeight: uni.upx2px(420),
					chartType: "line",
					extraType: "",
					id: "kuandu",
					xAxis: {
						disabled: false,
						disableGrid: true,
						labelCount: 8,
					},
					yAxis: {
						disabled: true,
					},
					opts: {
						categories: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30],
						series: []
					}
				},
				thinkGroup: {
					legend: {
						data: [],
						position: 'top',
						float: 'right',
						fontColor: 'rgba(0,0,0,0.60)'
					},
					radarWidth: uni.upx2px(690),
					radarHeight: uni.upx2px(420),
					chartType: "line",
					extraType: "",
					id: "houdu",
					xAxis: {
						disabled: false,
						disableGrid: true,
						labelCount: 8,
					},
					yAxis: {
						disabled: true,
					},
					opts: {
						categories: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30],
						series: []
					}
				},
			}
		},
		mounted() {
			this.date = getTime()
			this.getInfo()
			this.getSteelInfo()
			this.getWidthInfo()
			this.getthinkInfo()
		},
		methods: {
			beforePage() {
				uni.navigateBack({
					delta: 1
				});
			},
			DateChange(e) {
				this.date = e.detail.value
				this.getInfo()
			},
			async getInfo() {
				let res = await post(GET_COST_CLASS_INFO, {
					time: this.date
				})
				if(res.code == 0) {
					this.team.opts.categories = res.data.groupList
					this.team.opts.series[0].data = res.data.yieldList
				}
			},
			async getSteelInfo() {
				let res = await post(GET_COST_STATISTICS_INFO, {
					time: this.date,
					dimension: 'steelType'
				})
				if(res.code == 0) {
					let data = []
					for(let i = 0; i < res.data.length; i++ ) {
						data.push({
							name: res.data[i].classification,
							data: res.data[i].curve,
						})
					}
					this.group.opts.series = data
				}
			},
			async getWidthInfo() {
				let res = await post(GET_COST_STATISTICS_INFO, {
					time: this.date,
					dimension: 'width'
				})
				if(res.code == 0) {
					let data = []
					for(let i = 0; i < res.data.length; i++ ) {
						data.push({
							name: res.data[i].classification,
							data: res.data[i].curve,
						})
					}
					this.widthGroup.opts.series = data
				}
			},
			async getthinkInfo() {
				let res = await post(GET_COST_STATISTICS_INFO, {
					time: this.date,
					dimension: 'thickness'
				})
				if(res.code == 0) {
					let data = []
					for(let i = 0; i < res.data.length; i++ ) {
						data.push({
							name: res.data[i].classification,
							data: res.data[i].curve,
						})
					}
					this.thinkGroup.opts.series = data
				}
			}
		}
	}
</script>

<style>
</style>
